<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>vue</title>
    <style type="text/css">
      .bg {
        background: #f00;
      }
      .font {
        font-size: 40px;
      }
    </style>
  </head>
  <script src="../vue-2.6.11.js"></script>
  <body>
    <!-- 模板 -->

    <div id="example">
      <div v-bind:class="{bg:active}">{{ message }}</div>

      <!-- 数组语法中也可以使用对象语法 -->
      <div v-bind:class="[{bg:active},{font:true}]">{{ message }}</div>
    </div>

    <script>
      //数据
      let data = {
        message: 'miaov',
        active: true
      }

      //vm实例
      var vm = new Vue({
        el: '#example',
        data: data
      })
    </script>
  </body>
</html>
